<template>
    <div class="login_box">
        <h1>商城后台管理系统</h1>
        <p>
            账号：
            <el-input v-model="form.adminname" type="text" placeholder="请输入您的用户名" />
        </p>
        <p>
            密码：
            <el-input v-model="form.password" type="password" placeholder="请输入您的密码" show-password />
        </p>
        <el-button type="primary" @click="login">登录</el-button>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
// import md5 from "md5";
// import axios from 'axios'

import { loginRequest } from '../api/login'
export default {
    data() {
        return {
            form: {
                adminname: "admin",
                password: "123456"
            }
        }
    },
    methods: {
        async login() {
            //参数校验
            if (this.form.adminname === '' || this.form.password === '') {
                return ElMessage({
                    message: '账号或密码不能为空',
                    type: 'warning',
                })
            }

            //发送请求
            const { data } = await loginRequest(this.form)

            // 请求完毕后 做的事情
            if (data.code !== '200') {
                return ElMessage({
                    type: 'warning',
                    message: data.message
                })
            }

            //提醒用户登录成功
            ElMessage({
                type: 'success',
                message: data.message
            })

            //存储用户信息
            this.$store.commit('setUserInfo', data.data)

            //跳转页面
            this.$router.push('/')
        },


        // async login() {

        //     // 获取用户输入的账号和密码
        //     // console.log(this.form);

        //     // 对帐号密码添加非空校验
        //     if (this.form.adminname === '' || this.form.password === '') {
        //         return ElMessage({
        //             message: '账号或密码不能为空',
        //             type: 'warning',
        //         })
        //     }
        //     // 对账号密码添加正则校验
        //     // /^[\w-]{4,16}$/;
        //     // /^\d{6}$/

        //     // 发送请求
        //     // console.log("正常的用户名: ", this.form.adminname);
        //     // console.log("正常的密码: ", this.form.password);
        //     // console.log("加密后的用户名: ", md5(this.form.adminname));
        //     // console.log("加密后的密码: ", md5(this.form.password));

        //     // axios({
        //     //     url: 'http://121.89.205.189:3000/admin/admin/login',
        //     //     method: 'post',
        //     //     data: this.form,
        //     //     method: 'get',
        //     //     params: this.form

        //     // })

        //     // axios.get('http://121.89.205.189:3000/admin/admin/login', {
        //     //     params: this.form
        //     // })

        //     // axios
        //     //     .post('http://121.89.205.189:3000/admin/admin/login', this.form)
        //     //     .then((res) => {
        //     //         console.log(res);
        //     //     })

        //     const { data } = await axios.post(
        //         "http://121.89.205.189:3000/admin/admin/login",
        //         this.form
        //     )

        //     if (data.code !== '200') {
        //         return ElMessage({
        //             type: 'warning',
        //             message: data.message
        //         })
        //     }

        //     //提醒用户登录成功
        //     ElMessage({
        //         type: 'success',
        //         message: data.message
        //     })

        //     // 存储用户一些信息

        //     //跳转页面
        //     this.$router.push('/')



        //     // //原生Ajax，没有添加参数校验，也没有添加参数加密
        //     // const xhr = new XMLHttpRequest()
        //     // xhr.open('POST', 'http://121.89.205.189:3000/admin/admin/login')
        //     // xhr.setRequestHeader('content-type', 'application/json')
        //     // xhr.send(JSON.stringify(this.form))
        //     // xhr.onload = function () {
        //     //     console.log(xhr.responseText)
        //     // }
        // }
    }
}
</script>

<style lang="scss" scoped>
.login_box {
    width: 300px;
    height: 260px;
    background-color: #dddcdc;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 20px 30px;

    h1 {
        text-align: center;
    }

    .el-input {
        width: 85%;
    }

    .el-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>